<template>
  <div class='right-center-bottom'
    ref='rcb'>
    <comp-title v-if="dataSet.rightCenterBottom" :text="dataSet.rightCenterBottom.title"
      ref="compTitle"></comp-title>
    <rcbTop ref="rcbTop"></rcbTop>
    <rcbBottom ref="rcbBottom"></rcbBottom>
  </div>
</template>
<script>
import CompTitle from '@/components/common/compTitle'
import rcbTop from './rightCenterBottom/rcbTop'
import rcbBottom from './rightCenterBottom/rcbBottom'
import { mapState } from 'vuex'
export default {
  components: {
    CompTitle,
    rcbTop,
    rcbBottom
  },
  data() {
    return {}
  },
  created() {
    
  },
  mounted() {},
  computed: {
    ...mapState(['dataSet'])
  },
  watch: {},
  methods: {
    init() {
      let tl = new TimelineMax({}),
        rcb = TweenMax.to(this.$refs.rcb, 0.5, { opacity: 1 })
      tl.addLabel('start')
        .add(rcb, 'start+=0')
        .add(this.$refs.compTitle.init(), 'start+=0')
        .add(this.$refs.rcbTop.init(), 'start+=0.5')
        .add(this.$refs.rcbBottom.init(), 'start+=1.5')
      return tl
    }
  }
}
</script>
<style lang='scss' scoped>
.right-center-bottom {
  opacity: 0;
}
</style>